<template>
	<view class="filter-btn" :class="{ 'active': active }" @click="filterClick">
		<text class="name">{{ props.info.name }}</text>
		<text class="iconfont">
			{{ info.isDesc ? '&#xe7c6;': '&#xe7c7;' }}
		</text>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	const props = defineProps({
		info: {
			type: Object,
			default: () => {
				return {}
			}
		},
		active: {
			type: Boolean,
			default: false
		}
	})

	const emits = defineEmits([
		'filterClick'
	])

	const filterClick = () => {
		emits('filterClick', props.info)
	}
</script>

<style lang="scss" scoped>
	.filter-btn {
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		color: #7F7F7F;
		padding: 0 12px;
		border-radius: 15px;
		font-size: 12px;
		margin-right: 20px;
		border: 1px solid #F2F2F2;
		.name{
			width: max-content;
		}
		.iconfont{
			margin-left: 4px;
			font-size: 12px;
		}
		&.active {
			background-color: #000000;
			color: #fff;
			border: 1px solid #000000;
			.iconfont{
				color: #fff;
			}
		}
	}
</style>